import React, { Component } from 'react'
// 事件的定义
// 方式一： 直接在render函数内写 行内的箭头函数 --- jsx代码中写行内箭头函数
// 方式二： 在组件内部定义一个 箭头函数
// 方式三： 直接在组件内定义一个非箭头函数的方法,render函数内部绑定this
// 方式四： 直接在组件内定义一个非箭头函数的方法,constructor函数内部改变this
export default class App extends Component {
 
  constructor (props) {
    super(props)
    this.clickHandlerFn = this.clickHandler.bind(this)
    this.state = {
      count: 10
    }
  }
  clickHandler (e) {
    console.log(this)
    this.setState({
      count: this.state.count + 100
    })
  }
  render() {
    return (
      <div>
        <button onClick ={ this.clickHandlerFn }>加</button>{ this.state.count }
      </div>
    )
  }
}
